<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view class="header">
			<view class="image">
				<u-avatar :src="data.myShareUserInfo.avatar" size="140" show-sex :sex-icon="genderIconCom" ></u-avatar>
			</view>
			<view class="nickname">{{ nameFn(data.myShareUserInfo) }}</view>
			<view class="remark" v-if="$fn.getData(data.myShareUserInfo, 'fx.inviter_remark')">备注：{{ $fn.getData(data.myShareUserInfo, 'fx.inviter_remark') }}</view>
		</view>


		<view class="grid1">
			<u-grid :col="2" :border="false">
				<u-grid-item>
					<view class="grid-text">¥ {{ $fn.priceFilter($fn.getData(data.myShareUserInfo,'account_per.my_payment',0)) }}</view>
					<view class="grid-title">订单金额</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">{{ data.orderCount }}</view>
					<view class="grid-title">订单数量</view>
				</u-grid-item>
			</u-grid>
		</view>

		<u-cell-group :border="false">
			<u-cell-item title="电话号码" :value="$fn.hidden($getData(data.myShareUserInfo, 'social_info.mobile'),3,4) || '未填写'" :arrow="false" :value-style="{	fontWeight: 'bold'}"></u-cell-item>
			<u-cell-item title="添加日期" :value="vk.pubfn.timeFormat(data.myShareUserInfo.invite_time)" :arrow="false" :value-style="{	fontWeight: 'bold'}" :border-bottom="false"></u-cell-item>
		</u-cell-group>

		<u-gap height="120" bg-color="#ffffff"></u-gap>

		<view class="footer">
			<view class="btn2 type1 btn-active" @click="callPhone"><u-icon name="phone" size="30"></u-icon><text class="ml10">电话</text></view>
			<view class="btn2 type2 btn-active" @click="remark.show=true;remark.value=$fn.getData(data.myShareUserInfo, 'fx.inviter_remark');"><u-icon name="edit-pen" size="30"></u-icon><text class="ml10">备注</text></view>
		</view>

		<u-modal v-model="remark.show" title="备注" show-cancel-button @confirm="updateRemark">
			<view style="padding: 20rpx;">
				<u-input v-model="remark.value" type="textarea" />
			</view>
		</u-modal>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading" delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			// 列表查询请求数据
			cloudfunction1: {
				// 云函数返回的数据
				data: {
					rows:[], // 列表数据
					hasMore:true, // 是否还有下一页
					total:0, // 总记录数量
				},
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 20 //每页显示数量
				},
				// 查询表单数据源，可在此设置默认值
				formData: {
					_id: "",
				},
				// 查询匹配规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [

				],
				// 排序规则
				sortRule: [
					{ name:"_add_time", type:"desc" }, // desc降序 asc升序
				],
				// 下一页
				nextPage:()=>{
					this.cloudfunction1.pagination.pageIndex++;
					this.$refs.cloudfunction1.load();
				},
			},
			data: {
				myShareUserInfo: {
					account_per:{
						my_payment:"-"
					},
					mobile:"-"
				},
				orderCount:"-",
			},
			// 表单请求数据
			form1: {},
			scrollTop: 0,
			loading:false,
			options: {},
			remark:{
				show:false,
				value:""
			},

		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		this.init(this.options);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			console.log("init: ", options);
			vk.callFunction({
				url: 'client/salesman.getMyShareUserInfo',
				loading:true,
				data: options,
				success:function(data){
					that.data = data;
				}
			});
			that.cloudfunction1.formData._id = options._id;
		},
		pageTo(path) {
			vk.navigateTo(path);
		},
		updateRemark(){
			let that = this;
			let { remark, options } = that;
			vk.callFunction({
				url: 'client/salesman.updateMyShareUserInfo',
				loading:true,
				data:{
					_id: options._id,
					remark: remark.value
				},
				success:function(data){
					that.data.myShareUserInfo = data.myShareUserInfo;
				}
			});
		},
		callPhone(){
			let that = this;
			let mobile = vk.pubfn.getData(that.data.myShareUserInfo, 'social_info.mobile');
			if (!mobile) {
				vk.toast('用户未绑定手机');
				return false;
			}
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		nameFn(userInfo){
			return vk.myfn.salesman.getName(userInfo);
		},
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {
		genderIconCom() {
			let myShareUserInfo = this.data.myShareUserInfo;
			let str;
			if (myShareUserInfo.gender == 1) {
				str = "man";
			} else if (myShareUserInfo.gender == 1) {
				str = "woman";
			}
			return str;
		}
	}
};
</script>
<style lang="scss" scoped>
.app {
	background-color: #ffffff;
}
.header {
	width: 100%;
	height: 198rpx;
	display: block;
	position: relative;
	background: url("./static/1.png") no-repeat;
	background-size: 100% 100%;
	.image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		position: absolute;
		top: 44rpx;
		left: 66rpx;
	}
	.nickname{
		color: #ffffff;
		position: absolute;
		left:240rpx;
		top:60rpx;
		font-size: 24rpx;
	}
	.remark{
		color: #ffffff;
		position: absolute;
		left:240rpx;
		top:110rpx;
		font-size: 24rpx;
	}
}
.footer{
	position:fixed;
	bottom: 0;
	left:0;
	width: 100%;
	height: 120rpx;
	border-top: 2rpx solid #f8f8f8;
	display: flex;
	padding: 20rpx;
	z-index: 9;
	background-color: #ffffff;
	.btn1{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #a5a5a5;
		font-size: 24rpx;
	}
	.btn2{
		flex: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		color: #ffffff;
		border-radius: 10rpx;
	}
	.btn2.type1{
		background:linear-gradient(to right,#f4b74d,#ee923a);
	}
	.btn2.type2{
		background:linear-gradient(to right,#61bff3,#5093e8);
	}
}

.grid1{
	.grid-text{
		font-size: 34rpx;
		font-weight: bold;
	}
	.grid-title{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #7f7f7f;
	}
}

.time-line{
	padding: 30rpx 30rpx 30rpx 40rpx;
	.title{
		font-weight: bold;
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
}

</style>
